<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
			      margin: 0;
			      padding: 0;
			      box-sizing: border-box;
			      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			    }
			:root {
				  --primary-color: #3b82f6; /* 主色调-蓝色 */
				  --secondary-color: #10b981; /* 辅助色-绿色 */
				  --warning-color: #f59e0b; /* 警告色-黄色 */
				  --danger-color: #ef4444; /* 危险色-红色 */
				  --gray-light: #f3f4f6;
				  --gray-medium: #e5e7eb;
				  --gray-dark: #4b5563;
				  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
				  --shadow-md: 0 4px 6px rgba(0,0,0,0.05);
				  --radius: 0.625rem;
				  --transition: all 0.3s ease;
				}
			#navbar{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				background:white;
				border-bottom:1px solid var(--gray-medium) ;
				height: 64px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow:var(--shadow-sm);
				padding: 0 2em;
				z-index: 100;
			}
			.n1 span{
				font-size: 20px;
				font-weight: 600;
				color: var(--primary-color);
			}
			.nav-menu{
				margin: 0 2em;
			}
			.nav-menu ul{
				display: flex;
				list-style: none;
				gap: 28px;
			}
			.nav-menu a{
				text-decoration: none;
				color: var(--gray-dark);
				font-size: 16px;
				padding: 8px 0;
				position: relative;
				transition:var(--transition);
			}
			.nav-menu a:hover{
			    color: var(--primary-color);
			}
			.nav-menu a::after{
			    content: '';
			    position: absolute;
			    width: 0;
			    height: 2px;
			    bottom: 0;
			    left: 0;
			    background-color: var(--primary-color);
			    transition: var(--transition);
			}
			.nav-menu a:hover::after{
			    width: 100%;
			}
			.nav-menu a.active{
			    color: var(--primary-color);
			}
			.nav-menu a.active::after{
			    width: 100%;
			}
			.n1{
				display: flex;
				gap: 10px;
				align-items: center;
			}
			
			.right-actions{
				display: flex;
				align-items: center;
				gap: 24px;
			}
			.notification-btn{
				position: relative;
				background: none;
				border: none;
				font-size: 20px;
				color: var(--gray-dark);
				cursor: pointer;
				transition: var(--transition);
				width: 36px;
				height: 36px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.notification-btn:hover{
				color: var(--danger-color);
				background-color: var(--gray-light);
			}
			.notification-badge{
			    position: absolute;
			    top: 2px;
			    right: 2px;
			    background-color: var(--danger-color);
			    color: white;
			    font-size: 10px;
			    width: 16px;
			    height: 16px;
			    border-radius: 50%;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			}
			.user-info{
				display: flex;
				align-items: center;
				gap: 10px;
				cursor: pointer;
				padding: 4px 8px;
				border-radius: 20px;
				transition: var(--transition);
			}
			.user-info:hover{
			    background-color: var(--gray-light);
			}
			.user-name{
				font-size: 15px;
				
			}
			.user-image{
			    width: 36px;
			    height: 36px;
			    border-radius: 50%;
			    background-color: var(--primary-color);
			    color: white;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    font-weight: 600;
			}
			section h1{
				font-size: clamp(1.5rem,3vw,2.5rem);
				font-weight: 700;
				color: #111827;
				margin-bottom: 0.5rem;
			}
			.welcome-date-text{
			    font-size: 1rem;
			    color: var(--gray-dark);
			    margin-bottom: 2rem;
			}
			.main{
				padding-top: 5rem;
				padding-bottom: 4rem;
				background-color: #f9fafb;
				min-height: 100vh;
			}
			
			.section2{
				display: flex;
				justify-content:space-between ;
				margin-bottom: 2rem;
				flex-wrap: wrap;/* 控制弹性容器内的子元素在空间不足时是否换行。 */
				gap: 1rem;
			}
			.card{
				flex: 1;
				min-width: 250px;
				height: 10rem;
				box-shadow: var(--shadow-md);
				padding: 24px;
				background-color: white;
				border-radius: var(--radius);
				transition: var(--transition);
				border-top: 4px solid transparent;
			}
			.card:hover{
			    transform: translateY(-5px);
			    box-shadow: 0 10px 15px rgba(0,0,0,0.07);
			}
			.card:nth-child(1){
			    border-top-color: var(--primary-color);
			}
			.card:nth-child(2){
			    border-top-color: var(--danger-color);
			}
			.card:nth-child(3){
			    border-top-color: var(--secondary-color);
			}
			.card:nth-child(4){
			    border-top-color: var(--warning-color);
			}
			.main-div{
				padding: 1rem;
				margin: 0 3.75rem;
				max-width: 1400px;
				margin-left: auto;
				margin-right: auto;
			}
				
			.card-content{
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				height: 100%;
			}
			.card-icon{
			    width: 48px;
			    height: 48px;
			    border-radius: 12px;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    font-size: 24px;
			    color: white;
			}
			.card:nth-child(1) .card-icon{
			    background-color: rgba(59, 130, 246, 0.1);
			    color: var(--primary-color);
			}
			.card:nth-child(2) .card-icon{
			    background-color: rgba(239, 68, 68, 0.1);
			    color: var(--danger-color);
			}
			.card:nth-child(3) .card-icon{
			    background-color: rgba(16, 185, 129, 0.1);
			    color: var(--secondary-color);
			}
			.card:nth-child(4) .card-icon{
			    background-color: rgba(245, 158, 11, 0.1);
			    color: var(--warning-color);
			}
			
			.card-stats p:first-child{
			    color: var(--gray-dark);
			    font-size: 14px;
			    margin-bottom: 0.5rem;
			}
			.card-stats h3{
			    font-size: 24px;
			    margin-bottom: 0.5rem;
			    color: #111827;
			}
			.card-stats p:last-child{
			    font-size: 14px;
			    display: flex;
			    align-items: center;
			    gap: 4px;
			}
			.positive{
			    color: var(--secondary-color);
			}
			.negative{
			    color: var(--danger-color);
			}
			
			.card2{
				 display: grid;
				 grid-template-columns: repeat(12, 1fr);
				 gap: 2rem;
				 margin-bottom: 3rem;
			}
			.card-content2-left{
				grid-column: span 8;
			}
			.card-content2-right{
				grid-column: span 4;
			}
			.card-content2-left1, .card-content2-right1{
			            background-color: white;
			            border-radius: var(--radius);
			            box-shadow: var(--shadow-md);
			            padding: 1.5rem;
			            margin-bottom: 2rem;
			            transition: var(--transition);
			        }
			.card-content2-left1:hover, .card-content2-right1:hover{
			    box-shadow: 0 10px 15px rgba(0,0,0,0.07);
			}	
			.card-title{
			    font-size: 18px;
			    font-weight: 600;
			    margin-bottom: 1rem;
			    color: #111827;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			}
			.card-title a{
			    font-size: 14px;
			    color: var(--primary-color);
			    text-decoration: none;
			}
			.footer1{
				width: 100%;
				height: auto;
				border-top: 1px solid var(--gray-medium);
				background-color: white;
				padding: 2rem 0;
			}
			.footer2{
				display: flex;
				justify-content:space-between ;
				align-items: center;
				max-width: 1400px;
				margin: 0 auto;
				padding: 0 3.75rem;
				flex-wrap: wrap;
				gap: 1rem;
			}
			.footer-left p{
			    color: var(--gray-dark);
			    font-size: 14px;
			}
			.footer-right{
			    display: flex;
			    gap: 1.5rem;
			}
			.footer-right a{
			    color: var(--gray-dark);
			    text-decoration: none;
			    font-size: 14px;
			    transition: var(--transition);
			}
			.footer-right a:hover{
			    color: var(--primary-color);
			}
			
			.calendar-container{
				width: 100%;
				height: calc(100%-40px);
				padding: 0.625rem;
			}
			.calendar-header{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 0.9375rem;
				padding: 0 0.3125rem;
			}
			.calendar-nav{
				background: none;
				border: none;
				font-size: 1.125rem;
				color: var(--primary-color);
				cursor: pointer;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: var(--transition);
			}
			.calendar-nav:hover {
			    background-color: var(--gray-light);
			}
			#current-month {
			    font-size: 16px;
			    font-weight: 600;
			    color: #111827;
			}
			.calendar-weekdays {
			    display: grid;
			    grid-template-columns: repeat(7, 1fr);
			    gap: 5px;
			    margin-bottom: 10px;
			}
			.calendar-weekdays div {
			    text-align: center;
			    font-size: 14px;
			    color: var(--gray-dark);
			    padding: 8px 0;
			}
			.calendar-days {
			    display: grid;
			    grid-template-columns: repeat(7, 1fr);
			    gap: 5px;
			    height: calc(100% - 60px);
			}
			.calendar-day {
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    justify-content: flex-start;
			    background-color: var(--gray-light);
			    border-radius: 6px;
			    padding: 5px;
			    min-height: 60px;
			    cursor: pointer;
			    transition: var(--transition);
			    position: relative;
			}
			.calendar-day:hover {
			    background-color: #e0e7ff;
			}
			.calendar-day.current {
			    background-color: var(--primary-color);
			    color: white;
			}
			.calendar-day.other-month {
			    opacity: 0.4;
			}
			
			.day-number {
			    font-weight: 600;
			    margin-bottom: 3px;
			}
			
			/* 日程标记点 */
			.event-marker {
			    width: 6px;
			    height: 6px;
			    border-radius: 50%;
			    background-color: var(--secondary-color);
			    margin-top: 2px;
			}
			
			/* 备注弹窗背景（遮罩层） */
			.note-modal {
			    display: none; /* 默认隐藏 */
			    position: fixed;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
			    z-index: 1000; /* 确保在日历上方显示 */
			    align-items: center;
			    justify-content: center;
			}
			
			/* 弹窗内容 */
			.modal-content {
			    background-color: white;
			    border-radius: var(--radius);
			    width: 90%;
			    max-width: 500px;
			    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
			}
			
			/* 弹窗头部 */
			.modal-header {
			    padding: 1rem;
			    border-bottom: 1px solid var(--gray-medium);
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			}
			
			/* 关闭按钮 */
			.close-modal {
			    background: none;
			    border: none;
			    font-size: 1.5rem;
			    cursor: pointer;
			    color: var(--gray-dark);
			}
			
			.close-modal:hover {
			    color: var(--danger-color);
			}
			
			/* 弹窗内容区（输入框） */
			.modal-body {
			    padding: 1rem;
			}
			
			 #note-input {
            width: 100%;
            min-height: 120px;
            padding: 0.75rem;
            border: 1px solid var(--gray-medium);
            border-radius: var(--radius);
            resize: vertical;
            font-family: inherit;
            font-size: 14px;
        }
        #note-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        .modal-footer {
            padding: 1rem;
            border-top: 1px solid var(--gray-medium);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        #save-note, #delete-note {
            padding: 6px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: var(--transition);
        }
        #save-note {
            background-color: var(--primary-color);
            color: white;
            border: none;
        }
        #save-note:hover {
            background-color: #2563eb;
        }
        #delete-note {
            background-color: white;
            color: var(--danger-color);
            border: 1px solid var(--danger-color);
        }
        #delete-note:hover {
            background-color: #fef2f2;
        }

        @media (max-width: 768px) {
            .calendar-day {
                min-height: 60px;
                padding: 3px;
            }
            .day-number {
                font-size: 12px;
            }
        }
			
			
			/* 小屏幕适配 */
			@media (max-width: 768px) {
			    .calendar-day {
			        min-height: 40px;
			        padding: 3px;
			    }
			    .day-number {
			        font-size: 12px;
			    }
			}
			
			@media (max-width: 1024px) {
			    .card2{
			        grid-template-columns: 1fr;
			    }
			    .card-content2-left, .card-content2-right{
			        grid-column: span 12;
			    }
			}
			@media (max-width: 768px) {
			    .main-div, .footer2{
			        margin: 0 1rem;
			        padding: 0 0.5rem;
			    }
			    .nav-menu{
			        display: none;
			    }
			    .section2{
			        flex-direction: column;
			    }
			    .card{
			        width: 100%;
			    }
			}
		</style>
	</head>
	<body>
	  <header id="navbar">
	  	<div class="n1">
			<div class="n1-logo">
				<img src="边牧.png" width="40px"alt="Logo">
			</div>
	  		<span>生活管理系统</span>
	  	</div>
		<nav class="nav-menu">
			<ul>
				<li><a href="#"class="active">仪表盘</a></li>
				<li><a href="#">日程管理</a></li>
				<li><a href="#">财务管理</a></li>
				<li><a href="#">健康记录</a></li>
				<li><a href="#">待办事项</a></li>
			</ul>
		</nav>
		
		<div class="right-actions">
		      <!-- 通知按钮 -->
		      <button class="notification-btn">
		        🔔
		        <span class="notification-badge">3</span>
		      </button>
		
		      <!-- 用户信息 -->
		      <div class="user-info">
		        <div class="user-image">U</div>
		        <span class="user-name">用户名</span>
		      </div>
		    </div>
	  </header>
	  <main class="main">
		  <div class="main-div">
		  	
		  
		 <section>
			 <h1>欢迎你，XXX</h1>
			 <p class="welcome-date-text">今天是<span id="current-date"></span>让我们开启愉快的一天</p>
		 </section>
		 
		 <section class="section2">
			 <div class="card">
			 	<div class="card-content">
			 		<div class="card-stats">
			 			<p >待办事项</p>
						<h3 >8 <span>/12</span></h3>
						<p class="positive">完成率 67%</p>
			 		</div>
					<div class="card-icon">
						ab
					</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="card-stats">
			 			<p >今日支出</p>
			 			<h3 >￥<span>248</span></h3>
			 			<p class="negative">较昨日 12%</p>
			 		</div>
			 		<div class="card-icon">
			 			ab
			 		</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="card-stats">
			 			<p >今日步数</p>
			 			<h3>5632<span></span></h3>
			 			<p class="positive">目标 70%</p>
			 				</div>
			 		<div class="card-icon">
			 			ab
			 		</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="card-stats">
			 			<p >今日里程</p>
			 			<h3 >4 <span></span></h3>
			 			<p class="positive">下一个</p>
			 				 </div>
			 		<div class="card-icon">
			 			ab
			 		</div>
			 	</div>
			 </div>
		 </section>
		 
		 <div class="card2">
		 	<div class="card-content2-left">
		 		<div class="card-content2-left1">
		 			<div class="card-title">
		 			<span>支出趋势分析</span>
		 			 <a href="#">查看详情</a>
		 			</div>
					<!-- 这里可以放图表 -->
					<div style="height: calc(100% - 40px); display: flex; align-items: center; justify-content: center; color: var(--gray-dark);">
		 			      图表区域
		 			 </div>
		 		</div>
				<div class="card-content2-left1">
					<div class="card-title">
					    <span>近期日程安排</span>
					    <a href="#">查看全部</a>
					</div>
					<!-- 这里可以放日程列表 -->
					<div class="calendar-container">
						<div class="calendar-header">
							<button class="calendar-nav" id="prev-month">←</button>
							<h3 id="current-month"></h3>
							<button class="calendar-nav" id="next-month">→</button>
						</div>
						<div class="calendar-weekdays">
							<div>日</div>
							<div>一</div>
							<div>二</div>
							<div>三</div>
							<div>四</div>
							<div>五</div>
							<div>六</div>
						</div>
						<div class="calendar-days" id="calendar-days">
							
						</div>
					</div>
					
				</div>
		 	</div>
			<div class="card-content2-right">
				<div class="card-content2-right1">
					<div class="card-title">
						<span>健康数据</span>
						<a href="#">更多</a>
					</div>
					<!-- 这里可以放健康数据 -->
					<div style="height: calc(100% - 40px); display: flex; align-items: center; justify-content: center; color: var(--gray-dark);">
						健康数据
					</div>
				</div>
				<div class="card-content2-right1">
                        <div class="card-title">
                            <span>即将到期事项</span>
                            <a href="#">全部</a>
                        </div>
                        <!-- 这里可以放待办事项 -->
                        <div style="height: calc(100% - 40px); display: flex; align-items: center; justify-content: center; color: var(--gray-dark);">
                            待办事项
                        </div>
                    </div>
				<div class="card-content2-right1">
					<div class="card-title">
                            <span>本月预算使用情况</span>
                            <a href="#">详情</a>
                        </div>
                        <!-- 这里可以放预算进度 -->
                        <div style="height: calc(100% - 40px); display: flex; align-items: center; justify-content: center; color: var(--gray-dark);">
                            预算进度
                        </div>
				</div>
			</div>
			
		 </div>
		 </div>
		 
	  </main>
	  
	  <footer>
		  <div class="footer1">
		  	<div class="footer2">
		  		<div class="footer-left">
		  			<p>© 2023 生活管理系统. 保留所有权利.</p>
		  		</div>
				<div class="footer-right">
					<a href="#">帮助中心</a>
					<a href="#">隐私政策</a>
					<a href="#">使用条款</a>
				</div>
		  	</div>
		  </div>
	  </footer>
	  
	  <div class="note-modal" id="note-modal">
	      <div class="modal-content">
	          <div class="modal-header">
	              <h3 id="modal-date-title">2023年10月25日 备注</h3>
	              <button class="close-modal" id="close-modal">×</button>
	          </div>
	          <div class="modal-body">
	              <textarea id="note-input" placeholder="请输入备注内容..."></textarea>
	          </div>
	          <div class="modal-footer">
	              <button id="save-note">保存</button>
	              <button id="delete-note">删除</button>
	          </div>
	      </div>
	  </div>
	  
	  
	  	
	  <script>
		  
			const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
			const currentDate = new Date().toLocaleDateString('zh-CN', dateOptions);
			document.getElementById('current-date').textContent = currentDate;
	          // 存储备注数据（格式：{日期字符串: 备注内容}，如 "2023-10-25": "开会"）
	          let noteData = JSON.parse(localStorage.getItem('calendarNotes')) || {};
	          // 当前显示的日期
	          let currentDisplayDate = new Date();
	          // 当前选中的日期（用于弹窗交互）
	          let selectedDate = null;
	  
	          // 渲染日历
	          function renderCalendar() {
	              const year = currentDisplayDate.getFullYear();
	              const month = currentDisplayDate.getMonth();
	              const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
	              document.getElementById('current-month').textContent = `${year}年 ${monthNames[month]}`;
	  
	              const firstDay = new Date(year, month, 1);
	              const lastDay = new Date(year, month + 1, 0);
	              const firstDayIndex = firstDay.getDay();
	              const daysInMonth = lastDay.getDate();
	  
	              const daysContainer = document.getElementById('calendar-days');
	              daysContainer.innerHTML = '';
	  
	              // 添加上月剩余天数
	              const prevMonthLastDay = new Date(year, month, 0).getDate();
	              for (let i = firstDayIndex; i > 0; i--) {
	                  const day = prevMonthLastDay - i + 1;
	                  const dateStr = `${year}-${month}-${day}`; // 格式：年-月-日（月从0开始）
	                  const dayElement = createDayElement(day, true, false, dateStr);
	                  daysContainer.appendChild(dayElement);
	              }
	  
	              // 添加当月天数
	              const today = new Date();
	              const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month;
	              for (let i = 1; i <= daysInMonth; i++) {
	                  const isToday = isCurrentMonth && today.getDate() === i;
	                  const dateStr = `${year}-${month}-${i}`;
	                  const dayElement = createDayElement(i, false, isToday, dateStr);
	                  
	                  // 如果有备注，显示预览
	                  if (noteData[dateStr]) {
	                      const notePreview = document.createElement('div');
	                      notePreview.className = 'note-preview';
	                      notePreview.textContent = noteData[dateStr].length > 10 
	                          ? noteData[dateStr].slice(0, 10) + '...' 
	                          : noteData[dateStr];
	                      dayElement.appendChild(notePreview);
	                  }
	  
	                  daysContainer.appendChild(dayElement);
	              }
	  
	              // 添加下月开始天数
	              const remainingDays = 42 - (firstDayIndex + daysInMonth);
	              for (let i = 1; i <= remainingDays; i++) {
	                  const dateStr = `${year}-${month + 1}-${i}`;
	                  const dayElement = createDayElement(i, true, false, dateStr);
	                  daysContainer.appendChild(dayElement);
	              }
	          }
	  
	          // 创建单个日期元素
	          function createDayElement(dayNumber, isOtherMonth, isToday, dateStr) {
	              const dayElement = document.createElement('div');
	              dayElement.className = `calendar-day ${isOtherMonth ? 'other-month' : ''} ${isToday ? 'current' : ''}`;
	              dayElement.dataset.date = dateStr; // 存储日期字符串到data属性
	  
	              const numberElement = document.createElement('div');
	              numberElement.className = 'day-number';
	              numberElement.textContent = dayNumber;
	              dayElement.appendChild(numberElement);
	  
	              // 点击日期打开弹窗
	              dayElement.addEventListener('click', () => {
	                  selectedDate = dateStr; // 记录当前选中的日期
	                  const [year, month, day] = dateStr.split('-').map(Number);
	                  // 月份+1是因为存储的月份是0开始的
	                  document.getElementById('modal-date-title').textContent = 
	                      `${year}年${month + 1}月${day}日 备注`;
	                  // 显示已有备注
	                  document.getElementById('note-input').value = noteData[selectedDate] || '';
	                  // 显示弹窗
	                  document.getElementById('note-modal').style.display = 'flex';
	              });
	  
	              return dayElement;
	          }
	  
	          // 关闭弹窗
	          document.getElementById('close-modal').addEventListener('click', () => {
	              document.getElementById('note-modal').style.display = 'none';
	          });
	  
	          // 保存备注
	          document.getElementById('save-note').addEventListener('click', () => {
	              if (!selectedDate) return;
	              const noteContent = document.getElementById('note-input').value.trim();
	              if (noteContent) {
	                  noteData[selectedDate] = noteContent; // 保存到数据对象
	              } else {
	                  delete noteData[selectedDate]; // 空内容则删除备注
	              }
	              localStorage.setItem('calendarNotes', JSON.stringify(noteData)); // 保存到本地存储
	              renderCalendar(); // 重新渲染日历显示备注
	              document.getElementById('note-modal').style.display = 'none'; // 关闭弹窗
	          });
	  
	          // 删除备注
	          document.getElementById('delete-note').addEventListener('click', () => {
	              if (selectedDate && noteData[selectedDate]) {
	                  delete noteData[selectedDate];
	                  localStorage.setItem('calendarNotes', JSON.stringify(noteData));
	                  document.getElementById('note-input').value = '';
	                  renderCalendar();
	              }
	          });
	  
	          // 月份导航
	          document.getElementById('prev-month').addEventListener('click', () => {
	              currentDisplayDate.setMonth(currentDisplayDate.getMonth() - 1);
	              renderCalendar();
	          });
	          document.getElementById('next-month').addEventListener('click', () => {
	              currentDisplayDate.setMonth(currentDisplayDate.getMonth() + 1);
	              renderCalendar();
	          });
	  
	          // 初始化日历
	          renderCalendar();
	      </script>	
	  
	</body>
	
</html>
